<template>
  <div>
    <ul class="ul">
      <!--人员类型-->
      <li class="li" :class="{'icon-user':user, 'icon-user-act':!user}">
        <div @click="navigationA" :class="{edgeA}">
          <span>人员类型</span>
          <i class="float" :class="{ 'el-icon-arrow-up' : isC, 'el-icon-arrow-down': !isC}"></i>
        </div>
        <ul v-show="navigation1" class="deviant">
          <li class="li">
            <router-link class="router" to="/account/hcp/hcpz/doctor">
              <div @click="clicks1" :class="{'green':green1}">医生</div>
            </router-link>
          </li>
          <li class="li">
            <router-link class="router" to="">
              <div> 护士</div>
            </router-link>
          </li>
        </ul>
      </li>
      <!--科室-->
      <li class="li" :class="{'icon-house':house, 'icon-house-act':!house}">
        <div @click="navigationB" :class="{edgeB}">
          <span>科室</span>
          <i class="float" :class="{ 'el-icon-arrow-up' : isD, 'el-icon-arrow-down': !isD}"></i>
        </div>
        <ul v-show="navigation2" class="deviant">
          <li class="li">
            <router-link class="router" to="/account/hcp/hcpz/nurse">
              <div @click="clicks2" :class="{'green':green2}">呼吸科</div>
            </router-link>
          </li>
          <li class="li">
            <router-link class="router" to="">
              <div>内科</div>
            </router-link>
          </li>
          <li class="li">
            <router-link class="router" to="">
              <div @click="clicks3" :class="{'green':green3}">内分泌科</div>
            </router-link>
          </li>

        </ul>
      </li>
      <!--职称-->
<!--      <li class="li" :class="{'icon-hammer':hammer, 'icon-hammer-act':!hammer}">
        <div @click="navigationC" :class="{edgeC}">
          <span>职称</span>
          <i class="float" :class="{ 'el-icon-arrow-up' : isE, 'el-icon-arrow-down': !isE}"></i>
        </div>
        <ul v-show="navigation3" class="deviant">
          <li class="li">
            <router-link class="router" to="">
              <div>主治医生</div>
            </router-link>
          </li>
          <li class="li">
            <router-link class="router" to="">
              <div> 主任医师</div>
            </router-link>
          </li>
        </ul>
      </li>-->
      <!--通用图谱-->
      <li class="li" :class="{'icon-table':table, 'icon-table-act':!table}">
        <div @click="navigationD" :class="{edgeD}">
          <span>通用图谱</span>
          <i class="float" :class="{ 'el-icon-arrow-up' : isF, 'el-icon-arrow-down': !isF}"></i>
        </div>
        <div v-show="navigation4">
          <selwrap class="icon-user" title="影响力">
            <el-checkbox-group v-model="value1"size="medium" class="mr3 mb1">
              <el-checkbox-button v-for="item in item1s" :label="item" :key="item" >{{item}}</el-checkbox-button>
            </el-checkbox-group>
          </selwrap>
          <selwrap class="icon-user" title="学术水平">
            <el-checkbox-group v-model="value2" size="medium" class="mr3 mb1">
              <el-checkbox-button v-for="item in item1s" :label="item" :key="item">{{item}}</el-checkbox-button>
            </el-checkbox-group>
          </selwrap>
          <selwrap class="icon-user" title="学术关键字">
            <el-select v-model=value10 placeholder="请选择学术关键字">
              <el-option
                :key="item.value"
                v-for="(item, index) in keywords"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </selwrap>
          <selwrap class="icon-user" title="药企合作意愿">
            <el-checkbox-group v-model="value3" size="medium" class="mr3 mb1">
              <el-checkbox-button v-for="item in item1s" :label="item" :key="item">{{item}}</el-checkbox-button>
            </el-checkbox-group>
          </selwrap>
          <selwrap class="icon-user" title="医生潜力">
            <el-checkbox-group v-model="value4" size="medium" class="mr3 mb1">
              <el-checkbox-button v-for="item in item1s" :label="item" :key="item">{{item}}</el-checkbox-button>
            </el-checkbox-group>
          </selwrap>
          <selwrap class="icon-user" title="关注内容标签">
            <el-select v-model=value11 placeholder="请选择学术关键字">
              <el-option
                :key="item.value"
                v-for="(item, index) in items11"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </selwrap>
        </div>
      </li>
      <!--疾病图谱-->
      <li class="li" :class="{'icon-noun':noun, 'icon-noun-act':!noun}">
        <div @click="navigationE" :class="{edgeE}">
          <span>疾病图谱</span>
          <i class="float" :class="{ 'el-icon-arrow-up' : isG, 'el-icon-arrow-down': !isG}"></i>
        </div>
        <div v-show="navigation5">
          <selwrap class="icon-user" title="关注内容标签">
<!--            <el-select v-model=value21 placeholder="请选择学术关键字">
              <el-option
                :key="item.value"
                v-for="(item, index) in items21"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>-->

            <el-select v-model="value5" multiple placeholder="请选择学术关键字">
              <el-option
                v-for="(item, index) in items21"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </selwrap>
          <selwrap class="icon-user" title="关容标签">
<!--            <el-select v-model=value22 placeholder="请选择学术关键字">
              <el-option
                :key="item.value"
                v-for="(item, index) in items22"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>-->

            <el-select v-model="value22" multiple placeholder="请选择学术关键字">
              <el-option
                v-for="(item, index) in items22"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </selwrap>
        </div>
<!--        <ul v-show="navigation5" class="deviant">
          <li class="li">
            <router-link class="router" to="">
              <div>主治医生</div>
            </router-link>
          </li>
          <li class="li">
            <router-link class="router" to="">
              <div> 主任医师</div>
            </router-link>
          </li>
        </ul>-->
      </li>
    </ul>
  </div>
</template>

<script>
  import bus from '../../../bus';
  import selwrap from '@/comcom/selwrap'
  export default {
    components: {
      selwrap
    },
    data() {
      return {
        value11: [],
        value2: [],
        value3: [],
        value4: [],
        items11: [
          {label: '肿瘤突变负荷', value: 1},
          {label: 'MMR', value: 2},
          {label: 'MSI', value: 3},
          {label: '肿瘤突变负荷', value: 4},
          {label: 'PD-1/PD-L1', value: 5},
          {label: 'CTLA-4', value: 6},
          {label: '治疗性抗体', value: 7},
          {label: '癌症疫苗', value: 8},
          {label: '细胞治疗', value: 9},
          {label: 'CAR-T', value: 10},
          {label: 'TCR-T', value: 11},
          {label: 'IDO', value: 12},
          {label: '非小细胞肺癌', value: 13},
          {label: 'NSCLC', value: 14},
          {label: 'SCLC', value: 15},
          {label: '黑色素瘤', value: 16},
          {label: 'T细胞淋巴瘤', value: 17},
          {label: '免疫逃逸', value: 18},
          {label: '靶向治疗', value: 19},
        ],
        items21: [],
        items21_1: [
          {label: '肿瘤突变负荷', value: 1},
          {label: 'MMR', value: 2},
          {label: 'MSI', value: 3},
          {label: 'PD-1/PD-L1', value: 4},
          {label: 'CTLA-4', value: 5},
          {label: '治疗性抗体', value: 6},
          {label: '癌症疫苗', value: 7},
          {label: '细胞治疗', value: 8},
          {label: 'CAR-T', value: 9},
          {label: 'TCR-T', value: 10},
          {label: 'IDO', value: 11},
          {label: '非小细胞肺癌', value: 12},
          {label: 'NSCLC', value: 13},
          {label: '小细胞肺癌', value: 14},
          {label: 'SCLC', value: 15},
          {label: '肿瘤突变负荷', value: 16},
          {label: '结直肠癌', value: 17},
          {label: '复发结直肠癌', value: 18},
          {label: '膀胱癌', value: 19},
          {label: '头颈癌', value: 20},
          {label: '霍奇金淋巴瘤', value: 21},
          {label: '肾癌', value: 22},
          {label: '默克细胞癌', value: 23},
          {label: '黑色素瘤', value: 24},
          {label: 'T细胞淋巴瘤', value: 25},
          {label: '免疫逃逸', value: 26},
          {label: '靶向治疗', value: 27},
          {label: '联合治疗', value: 28},
        ],
        items21_2: [
          {label: '治疗性抗体11', value: 1},
          {label: 'MMR', value: 2},
          {label: 'MSI', value: 3},
          {label: 'PD-1/PD-L1', value: 4},
          {label: 'CTLA-4', value: 5},
          {label: '肿瘤突变负荷', value: 6},
          {label: '癌症疫苗', value: 7},
          {label: '细胞治疗', value: 8},
          {label: 'CAR-T', value: 9},
          {label: 'TCR-T', value: 10},
          {label: 'IDO', value: 11},
          {label: '非小细胞肺癌', value: 12},
          {label: 'NSCLC', value: 13},
          {label: '小细胞肺癌', value: 14},
          {label: 'SCLC', value: 15},
          {label: '肿瘤突变负荷', value: 16},
          {label: '结直肠癌', value: 17},
          {label: '复发结直肠癌', value: 18},
          {label: '膀胱癌', value: 19},
          {label: '头颈癌', value: 20},
          {label: '霍奇金淋巴瘤', value: 21},
          {label: '肾癌', value: 22},
          {label: '默克细胞癌', value: 23},
          {label: '黑色素瘤', value: 24},
          {label: 'T细胞淋巴瘤', value: 25},
          {label: '免疫逃逸', value: 26},
          {label: '靶向治疗', value: 27},
          {label: '联合治疗', value: 28},
        ],
        value22: [],
        items22: [],
        items22_1: [
          {label: '偏好免疫治疗', value: 1},
          {label: '偏好靶向治疗', value: 2},
          {label: '偏好联合化疗', value: 3},
          {label: '偏好细胞治疗', value: 4},
          {label: '偏好手术治疗', value: 5},
          {label: '偏好辅助治疗', value: 6},
        ],
        items22_2: [
          {label: '偏好免疫治疗11', value: 1},
          {label: '偏好靶向治疗11', value: 2},
          {label: '偏好联合化疗11', value: 3},
          {label: '偏好细胞治疗11', value: 4},
          {label: '偏好手术治疗11', value: 5},
          {label: '偏好辅助治疗11', value: 6},
        ],
        value10: null,
        keywords: [
          {label: '非小细胞肺癌', value: 1},
          {label: '黑色素瘤', value: 2},
          {label: '小细胞肺癌', value: 3},
          {label: '肿瘤突变负荷', value: 4},
          {label: 'MMR', value: 5},
          {label: 'MSI', value: 6},
          {label: 'PD-1/PD-L1', value: 7},
        ],
        value1: [],
        item1s: [
          '高',
          '中',
          '低',
        ],
        value7: null,
        value5: [],

        user: true,
        house: true,
        hammer: true,
        table: true,
        noun: true,

        edgeA: false,
        edgeB: false,
        edgeC: false,
        edgeD: false,
        edgeE: false,
        green1: true,
        green2: false,
        green3: false,

        navigation1: false,
        navigation2: false,
        navigation3: false,
        navigation4: false,
        navigation5: false,
        administrative: false,

        isC: false,
        isD: false,
        isE: false,
        isF: false,
        isG: false,

        refresh:true,

        dynamicTags: [
          {name: '标签一', type: ''},
          {name: '标签二', type: 'success'},
          {name: '标签三', type: 'info'},
          {name: '标签四', type: 'warning'},
          {name: '标签五', type: 'danger'}
        ],
      }
    },
    methods: {
      showToggle() {
        this.isShow = !this.isShow;
        this.isA = !this.isA;
      },
      showToggle1() {
        this.isShow1 = !this.isShow1;
        this.isB = !this.isB;
      },
      navigationA() {
        this.navigation1 = !this.navigation1;
        this.isC = !this.isC;
        this.edgeA = !this.edgeA;
        this.user = !this.user;
      },
      navigationB() {
        this.navigation2 = !this.navigation2;
        this.isD = !this.isD;
        this.edgeB = !this.edgeB;
        this.house = !this.house;
      },
      navigationC() {
        this.navigation3 = !this.navigation3;
        this.isE = !this.isE;
        this.edgeC = !this.edgeC;
        this.hammer = !this.hammer;
      },
      navigationD() {
        this.navigation4 = !this.navigation4;
        this.isF = !this.isF;
        this.edgeD = !this.edgeD;
        this.table = !this.table;
      },
      navigationE() {
        this.navigation5 = !this.navigation5;
        this.isG = !this.isG;
        this.edgeE = !this.edgeE;
        this.noun = !this.noun;
      },
      clicks1(){
        this.green1 =true;
        this.green2 =false
      },
      clicks2(){
        this.green1 =false;
        this.green2 = !this.green2;

        let breathe = event.currentTarget.innerHTML;
        if(breathe =='呼吸科'){
          this.items21 = this.items21_2
        }else{
          this.items21 = this.items21_1
        }
      },
      clicks3(){
        this.green3 = !this.green3
        let secretion = event.currentTarget.innerHTML;
        if(secretion =='内分泌科'){
          this.items22 = this.items22_2
        }else{
          this.items22 = this.items22_1
        }
      },
    },
    watch:{
      value1(){
        bus.$emit('refresh', this.refresh);
      },
      value2(){
        bus.$emit('refresh', this.refresh);
      },
      value10(){
        bus.$emit('refresh', this.refresh);
      },
      value3(){
        bus.$emit('refresh', this.refresh);
      },
      value4(){
        bus.$emit('refresh', this.refresh);
      },
      value11(){
        bus.$emit('refresh', this.refresh);
      },
      value21(){
        bus.$emit('refresh', this.refresh);
      },
      value22(){
        bus.$emit('refresh', this.refresh);
      },

    },

    mounted(){
      this.items21 = this.items21_1;
      this.items22 = this.items22_1;
    }
  }
</script>

<style scoped>
  @import '../../../../assets/index.css';
  .li {
    list-style: none;
    margin: 0;
    padding-left: 30px;
    padding-bottom: 10px;
  }
  .ul > .li > div {
    font-size: 15px;
    color: #fff;
    padding: 0 30px 10px 0;
  }
  /*点击样式*/
  .edgeA {
    border-right: 3px solid #1f9e91;
    color: #1f9e91 !important;
  }
  .edgeB {
    border-right: 3px solid #1f9e91;
    color: #1f9e91 !important;
  }
  .edgeC {
    border-right: 3px solid #1f9e91;
    color: #1f9e91 !important;
  }
  .edgeD {
    border-right: 3px solid #1f9e91;
    color: #1f9e91 !important;
  }
  .edgeE {
    border-right: 3px solid #1f9e91;
    color: #1f9e91 !important;
  }
  .green{
    color: #1f9e91 !important;
  }
  .float {
    float: right;
  }
  .deviant {
    margin: 0 0 0 -30px
  }
  .router {
    text-decoration: none;
  }
  .router > div {
    font-size: 14px;
    color: #fff;
    padding: 5px 0;
  }

</style>
<style>
  .el-checkbox-button>.el-checkbox-button__inner{
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    box-sizing: border-box;
    width: 100%;
    font-size: 12px!important;
  }
</style>
